import React, { useEffect } from "react";
import { connect } from "react-redux";

import { removeAction, loadAction } from "./store/actionCreators";

const mapStateToProps = (state) => {
  return {
    list: state.list,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    remove(id) {
      dispatch(removeAction(id));
    },
    load() {
      dispatch(loadAction());
    },
  };
};

const List = (props) => {
  useEffect(() => {
    props.load();
    // eslint-disable-next-line
  }, []);

  const removeItem = (id) => () => {
    props.remove(id);
  };

  return (
    <ul>
      {props.list.map((item) => (
        <li key={item._id}>
          {item.title} - {item._id} -{" "}
          <button onClick={removeItem(item._id)}>删除</button>
        </li>
      ))}
    </ul>
  );
};

export default connect(mapStateToProps, mapDispatchToProps)(List);
